<template>
  <div class="goodsBox">
    <div style="background-color: white">
      <div class="listName">
        <el-button size="small" type="primary" plain @click="goBack">返回</el-button>
        <div v-if="dialogType!==3">
          <el-button size="small" type="success" plain @click="submitForm">保存</el-button>
        </div>
      </div>
      <el-form ref="dialogBindData" :model="dialogBindData" :rules="rules" label-width="20%" status-icon>
        <el-row :gutter="150">
          <el-col :xs="24" :sm="24" :md="16" :lg="13" :xl="13">
            <el-form-item label="活动名称" prop="activityName">
              <el-input v-if="dialogType !== 3 " :disabled="disableIinput" v-model="dialogBindData.activityName" size="small" type="text" placeholder="请输入活动名称"/>
              <span v-else>{{ dialogBindData.activityName }}</span>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-date-picker
                v-if="dialogType !== 3"
                :disabled="disableIinput"
                v-model="dialogBindData.startTime"
                :picker-options="startDatePicker"
                size="small"
                align="right"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择开始日期"/>
              <el-date-picker
                v-if="dialogType !== 3"
                :disabled="disableIinput"
                v-model="dialogBindData.endTime"
                :picker-options="endDatePicker"
                size="small"
                align="right"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择结束日期"/>
              <span v-if="dialogType === 3">{{ dialogBindData.startTime +' ~ '+dialogBindData.endTime }}</span>
            </el-form-item>
            <el-form-item label="活动规则" prop="remark">
              <el-input v-if="dialogType !== 3" :disabled="disableIinput" v-model="dialogBindData.remark" size="small" autosize type="textarea" placeholder="请输入活动规则"/>
              <span v-else>{{ dialogBindData.remark }}</span>
            </el-form-item>
            <el-form-item v-if="dialogType !== 3" label="参与次数" prop="joinCount">
              <el-input :disabled="disableIinput" v-model="dialogBindData.joinCount" size="small" type="number" placeholder="1~99（值默认为0）">
                <template slot="append">次</template>
              </el-input>
              <span style="color: red">值为0则为无限次数</span>
            </el-form-item>
            <el-form-item v-if="dialogType !== 3" label="消耗积分" prop="expIntegral">
              <el-input :disabled="disableIinput" v-model="dialogBindData.expIntegral" size="small" type="number" placeholder="请输入消耗积分（值默认为0）"/>
              <span style="color: red">值为0则为无限积分</span>
            </el-form-item>
            <el-form-item v-if="dialogType !== 3 && editData.status !== 0" label="活动图标" prop="activityIcon">
              <div style="padding: 0 10px">
                <el-upload
                  :action="actionUrl"
                  :on-change="handleChange"
                  :http-request="uploadFile">
                  <el-button size="small" type="primary">自定义上传</el-button>
                </el-upload>
                <div v-if="dialogBindData.activityIcon !== ''" style="width: 94px;height: 94px;padding: 5px;border: 1px solid #3a8ee6">
                  <img :src="dialogBindData.activityIcon" width="82" height="82">
                </div>
              </div>
              <span class="morenImg">系统默认图片</span>
              <ul class="iconList">
                <li v-for="(item,index) of iconList" :key="index" :class="{'activeLi':item.iconStyle}" @click="clickIconFun(item)">
                  <img :src="item.img" >
                </li>
              </ul>
            </el-form-item>
            <el-form-item v-if="dialogType !== 3 && editData.status !== 0" label="活动中奖商品">
              <div style="margin: 10px 0;width: 180px">
                <el-switch
                  v-model="switchType"
                  style="display: block"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  active-text="手动添加"
                  inactive-text="选择商品"
                  @change="switchFun"/>
              </div>
              <div class="shopBox" >
                <div v-for="(item,index) of shop9List" :key="index" class="shoplist" @click="shopClickFun(item,index)">
                  <img :src="item" width="70px" height="70px">
                  <!--<i v-if="index !== 4" class="el-icon-delete" @click="delshopImg"></i>-->
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!--商品列表-->
    <div v-if="dialogType !== 3" class="table-wrapper">
      <p style="color: #666;">商品列表</p>
      <el-table v-loading="!dataShop" :data="dataShop" stripe border empty-text="暂无数据">
        <el-table-column align="center" prop="itemName" label="奖品名称">
          <template slot-scope="scope">
            <el-input v-if="switchType" :disabled="disableIinput" v-model="scope.row.itemName" size="mini" type="text" />
            <span v-if="!switchType">{{ scope.row.itemName }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="商品图片">
          <template slot-scope="scope">
            <div v-if="switchType">
              <upLoadImgsku v-if="editData.status !== 0" :idx="scope.row.sortNo" @emitSuccessImg="successImg"/>
              <img :src="scope.row.prizePicUrl" width="50px" height="50px">
            </div>
            <div v-if="!switchType">
              <img :src="scope.row.prizePicUrl" width="50px" height="50px">
            </div>
          </template>
        </el-table-column>

        <!--<el-table-column align="center" prop="itemId" label="商品ID"/>-->

        <el-table-column align="center" label="中奖概率(%)">
          <template slot-scope="scope">
            <el-input v-model="scope.row.okRate" size="mini" type="number"/>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="marketPrice" label="原始价格">
          <template slot-scope="scope">{{ scope.row.marketPrice }}</template>
        </el-table-column>

        <el-table-column align="center" label="中奖价格">
          <template slot-scope="scope">
            <el-input :disabled="disableIinput" v-model="scope.row.activityPrice" size="mini" type="number" />
          </template>
        </el-table-column>

        <el-table-column align="center" label="数量限制">
          <template slot-scope="scope">
            <el-input :disabled="disableIinput" v-model="scope.row.activityCount" size="mini" type="number" placeholder="请输入数量限制(值为0则无限制，默认0)"/>
          </template>
        </el-table-column>

        <el-table-column v-if="editData.status !== 0" align="center" label="操作" width="230px">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" plain @click.native.prevent="del(scope.$index, dataShop ,scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
    </div>
    <!--中奖名单-->
    <div v-else class="table-wrapper">
      <p style="color: #333;display: inline-block;margin-right: 50px">中奖名单</p>
      <span style="color: #666;">总参与人数：{{ joinBoyCount }}</span>
      <el-table v-loading="!winningList" :data="winningList" stripe border empty-text="暂无数据">

        <el-table-column type="index" align="center" width="50" label="序号"/>

        <el-table-column align="center" prop="memberName" label="用户名称"/>

        <el-table-column align="center" prop="userPhone" label="手机号码"/>

        <el-table-column align="center" prop="itemName" label="奖品名称"/>

        <el-table-column align="center" label="奖品图片">
          <template slot-scope="scope">
            <img :src="scope.row.prizePicUrl" width="50px" height="50px">
          </template>
        </el-table-column>

        <el-table-column align="center" prop="itemNo" label="奖品编码"/>

        <el-table-column align="center" label="是否已核销">
          <template slot-scope="scope" >
            <div v-if="getUser().sellerId === null">
              <div v-if="scope.row.sellerId =='0'">
                <span v-if="scope.row.status === 0" style="cursor: pointer" class="statusClass0" @click="afteropen(scope.row)">{{ statusVal(scope.row.status) }}</span>
                <span v-else style="cursor: pointer" class="statusClass1" >{{ statusVal(scope.row.status) }}</span>
              </div>
              <div v-else>
                <span>商家活动</span>
              </div>
            </div>
            <div v-if="getUser().sellerId !== null">
              <div v-if="scope.row.sellerId !='0'">
                <span v-if="scope.row.status === 0" style="cursor: pointer" class="statusClass0" @click="afteropen(scope.row)">{{ statusVal(scope.row.status) }}</span>
                <span v-else style="cursor: pointer" class="statusClass1" >{{ statusVal(scope.row.status) }}</span>
              </div>
              <div v-else>
                <span>平台活动</span>
              </div>
            </div>
          </template>

        </el-table-column>

        <el-table-column align="center" prop="createTime" label="中奖时间"/>

        <el-table-column align="center" prop="fullAddr" label="收货地址"/>

      </el-table>

      <!--分页-->
      <el-pagination
        :current-page="pageNo"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        :total="rowCount"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
    </div>

    <!--弹框-->
    <el-dialog
      :visible.sync="dialogState"
      :close-on-click-modal="false"
      :before-close="handleClose"
      title="选择商品"
      top="5vh"
      width="60%">
      <template v-if="!switchType">
        <div style="padding: 0 30px;">
          <el-table v-loading="!dataOption" ref="goodTable" :data="dataOption" :cell-class-name="cellcb" stripe border empty-text="暂无数据" @selection-change="selectChange">

            <el-table-column align="center" type="selection" width="55"/>

            <el-table-column align="center" prop="itemTitle" label="商品名称" show-overflow-tooltip/>

            <el-table-column align="center" prop="marketPrice" label="商品价格"/>

            <el-table-column align="center" prop="itemTitle" label="商品类型">
              <template slot-scope="scope">{{ scope.row.itemType === 1 ? '积分商品' : '普通商品' }}</template>
            </el-table-column>

            <el-table-column align="center" label="商品图片">
              <template slot-scope="scope">
                <img :src="scope.row.defaultPicUrl" width="50px" height="50px">
              </template>
            </el-table-column>

            <el-table-column align="center" prop="itemId" label="商品ID"/>

          </el-table>
          <!--分页-->
          <el-pagination
            :current-page="pageNo"
            :page-sizes="[10, 20, 30]"
            :page-size="pageSize"
            :total="rowCount"
            background
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button v-if="dialogType !== 3" size="small" type="primary" @click="submmitFun">确 定</el-button>
        </div>
      </template>
      <template v-if="switchType">
        <el-form ref="dialogBindDataGood" :model="dialogBindDataGood" :rules="rulesgood" label-width="30%" status-icon class="demo-ruleForm">
          <div class="formBody">
            <el-form-item label="奖品名称" prop="itemName">
              <el-input v-model="dialogBindDataGood.itemName" size="small" type="text" placeholder="请输入奖品名称"/>
            </el-form-item>
            <el-form-item label="图片" prop="prizePicUrl" class="three">
              <upLoadImgsku @emitSuccessImg="successImg"/>
              <img v-if="dialogBindDataGood.prizePicUrl" :src="dialogBindDataGood.prizePicUrl" width="100px" height="100px">
            </el-form-item>
            <el-form-item label="中奖概率(%)" prop="okRate">
              <el-input v-model="dialogBindDataGood.okRate" size="small" type="text" placeholder="请输入中奖概率(%)"/>
            </el-form-item>
            <el-form-item label="中奖价格" prop="activityPrice">
              <el-input v-model="dialogBindDataGood.activityPrice" size="small" type="text" placeholder="请输入中奖价格"/>
            </el-form-item>
            <el-form-item label="数量限制" prop="activityCount">
              <el-input v-model="dialogBindDataGood.activityCount" size="small" type="text" placeholder="请输入数量限制(值为0则无限制，默认0)"/>
            </el-form-item>
          </div>
        </el-form>
        <div class="btns-wrapper">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button v-if="dialogType !== 3" size="small" type="primary" @click="submmitFunGood">确 定</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import * as activity from '../../api/activity'
import { getUserInformation } from '@/utils/auth'
import upLoadImgsku from '../../components/UpLoadImg_sku'
import axios from 'axios'
export default {
  components: { upLoadImgsku },
  data() {
    return {
      isRouterAlive: true,
      pageNo: 1,
      pageSize: 10,
      rowCount: null, // 总条数
      // 图片集合
      file: {},
      actionUrl: '',
      iconList: [],
      iconStyle: false,
      // 弹框
      dialogState: false,
      dialogType: null, // 1 -新增  2 - 编辑  3 -查看
      // 编辑数据
      editData: {},
      // 表格数据
      dataOption: null,
      selectData: null,
      // 商品表格
      dataShop: [],
      // 中奖名单
      winningList: [],
      joinBoyCount: 0,
      // 开关
      switchType: false, // false 选择商品  true 手动添加
      tableStatus: false,
      // 抽奖商品9宫格
      shop9List: [
        './static/images/noPic.png',
        './static/images/noPic.png',
        './static/images/noPic.png',
        './static/images/noPic.png',
        './static/images/dianjichoujiang.png',
        './static/images/noPic.png',
        './static/images/noPic.png',
        './static/images/noPic.png',
        './static/images/noPic.png'
      ],
      indexShop: null,
      // 提交内容
      dialogBindData: {
        activityName: '',
        startTime: '',
        endTime: '',
        joinCount: '',
        expIntegral: '',
        activityIcon: '',
        remark: '',
        marketPrice: ''
      },
      // 新添加商品
      dialogBindDataGood: {
        itemName: '',
        prizePicUrl: '',
        okRate: '',
        activityPrice: '',
        activityCount: ''
      },
      rules: {
        activityName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入活动规则', trigger: 'blur' }
        ]
      },
      rulesgood: {
        itemName: [
          { required: true, message: '请输入奖品名称', trigger: 'blur' }
        ],
        okRate: [
          { required: true, message: '请输入中奖率', trigger: 'blur' }
        ],
        activityPrice: [
          { required: true, message: '请输入中奖价格', trigger: 'blur' }
        ]
      },
      disableIinput: false, // 禁用
      // 时间组件控制
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),

      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周后',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  beforeMount() {
    this.dialogType = this.$route.params.type
    this.editData.status = 9
    if (this.dialogType === undefined || this.dialogType === null) {
      this.$router.go(-1)
    } else {
      if (this.dialogType === 1) {
        this.initUploadFileurl() // 上传图片地址
        this.geticonList() // 获取图片集合
      } else if (this.dialogType === 2) {
        this.editData = this.$route.params.data
        this.initUploadFileurl() // 上传图片地址
        this.geticonList() // 获取图片集合
        this.reBindData(this.editData)
        if (this.editData.status === 0) {
          this.disableIinput = true
        }
      } else if (this.dialogType === 3) {
        this.editData = this.$route.params.data
        this.disableIinput = true
        this.reBindData(this.editData)
        this.getPrizeRecordList()
        this.joinBoyCount = this.editData.joinBoyCount
      }
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    // 获取用户信息
    getUser() {
      return JSON.parse(getUserInformation())
    },
    // 商品列表
    getList(cb) {
      const param = {
        current: this.pageNo,
        size: this.pageSize
      }
      if (this.getUser().sellerId === null) {
        param.itemSource = 0
      }
      activity.getshopList(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        const dataArr = res.data.data.records
        for (const i in dataArr) {
          dataArr[i].checkde = false
          if (dataArr[i].listStatus !== 1) {
            dataArr.splice(i, 1)
          }
        }
        for (const val of dataArr) {
          val.checkde = false
        }

        if (this.dataShop.length !== 0) {
          for (const val of dataArr) {
            for (const data of this.dataShop) {
              if (val.itemId === data.itemId) {
                val.checkde = true
              }
            }
          }
          this.dataOption = dataArr
        } else {
          this.dataOption = dataArr
        }

        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = 10
      })
    },
    // 中奖列表
    getPrizeRecordList() {
      const param = {
        current: this.pageNo,
        size: this.pageSize,
        activityId: this.editData.id
      }
      activity.getprizeRecordist(param).then(res => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.msg)
          return false
        }
        if (res.data.data === 'null' || res.data.data === null) {
          return false
        }
        // 初始话表格数据
        this.winningList = res.data.data.records
        // 初始化分页数据
        this.rowCount = res.data.data.total
        this.pageSize = 10
      })
    },
    // 开关
    switchFun() {
      this.open('此操作将重新添加中奖商品, 是否继续?')
    },
    open(text, type) {
      const that = this
      if (this.dataShop.length > 0) {
        this.$confirm(text, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showClose: false,
          type: 'warning'
        }).then(() => {
          if (that.switchType === true) {
            that.switchType = true
            this.dataShop = []
            for (const i in this.shop9List) {
              if (parseInt(i) === 4) {
                this.shop9List[i] = './static/images/dianjichoujiang.png'
              } else {
                this.shop9List[i] = './static/images/noPic.png'
              }
            }
          } else {
            that.switchType = false
            this.dataShop = []
            for (const i in this.shop9List) {
              this.shop9List[i] = './static/images/noPic.png'
              if (parseInt(i) === 4) {
                this.shop9List[i] = './static/images/dianjichoujiang.png'
              } else {
                this.shop9List[i] = './static/images/noPic.png'
              }
            }
          }
        }).catch(() => {
          if (that.switchType === true) {
            that.switchType = false
          } else {
            that.switchType = true
          }
        })
      }
    },
    // 保存
    submitForm() {
      const param = {
        activityName: this.dialogBindData.activityName,
        startTime: this.dialogBindData.startTime,
        endTime: this.dialogBindData.endTime,
        activityIcon: this.dialogBindData.activityIcon,
        remark: this.dialogBindData.remark,
        activityType: 1,
        list: this.dataShop
      }
      if (this.switchType) {
        param.type = 1
      } else {
        param.type = 0
      }
      if (this.getUser().sellerId !== null) {
        param.sellerId = this.getUser().sellerId
      }
      if (this.dialogType === 2) {
        param.id = this.editData.id
      }
      this.$refs.dialogBindData.validate((valid) => {
        if (valid) {
          if (this.dialogBindData.endTime === '' || this.dialogBindData.startTime === '') {
            this.$message({
              message: '请选择活动时间',
              type: 'warning'
            })
            return false
          }
          if (this.dialogBindData.joinCount === '' && this.dialogBindData.expIntegral === '') {
            this.$message({
              message: '请输入参与次数或消耗积分',
              type: 'warning'
            })
            return false
          }
          if (this.dialogBindData.joinCount === '') {
            param.joinCount = 0
          } else {
            param.joinCount = this.dialogBindData.joinCount
          }
          if (this.dialogBindData.expIntegral === '') {
            param.expIntegral = 0
          } else {
            param.expIntegral = this.dialogBindData.expIntegral
          }
          if (this.dialogBindData.activityIcon === '') {
            this.$message({
              message: '请选择活动图标',
              type: 'warning'
            })
            return false
          } else if (this.dataShop === null || this.dataShop.length === 0) {
            this.$message({
              message: '请选择活动中奖商品',
              type: 'warning'
            })
            return false
          }
          var result = this.dataShop.some(function(item) {
            if (parseFloat(item.okRate) >= 100) {
              return true
            }
          })
          if (result) {
            this.$message({
              message: '中奖率不能超过100',
              type: 'warning'
            })
            return false
          }
          if (this.dialogType === 1) {
            const loading = this.$loading({
              lock: true,
              text: '保存中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            activity.addSnapupList(param).then(res => {
              loading.close()
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '添加成功',
                type: 'success'
              })
              this.$router.go(-1)
            }).catch(res => {
              this.$message({
                type: 'info',
                message: res.message
              })
              loading.close()
            })
          } else {
            const loading = this.$loading({
              lock: true,
              text: '保存中',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            activity.addSnapupList(param).then(res => {
              loading.close()
              if (res.data.code !== 1) {
                this.$message({
                  message: res.data.msg,
                  type: 'warning'
                })
                this.buttonState = false
                return false
              }
              this.$message({
                message: '编辑成功',
                type: 'success'
              })
              this.$router.go(-1)
            }).catch(res => {
              this.$message({
                type: 'info',
                message: res.message
              })
              loading.close()
            })
          }
        } else {
          return false
        }
      })
    },
    // 删除
    del(index, rows, data) {
      rows.splice(index, 1)
      for (let i = 0; i < this.shop9List.length; i++) {
        if (this.shop9List[i] === data.prizePicUrl) {
          this.shop9List[i] = './static/images/noPic.png'
        }
      }
    },
    // 选择商品
    shopClickFun(item, index) {
      if (index === 4 || item !== './static/images/noPic.png') {
        return false
      } else {
        if (!this.switchType) {
          this.dialogState = true
          this.indexShop = index
          this.getList()
        } else {
          this.dialogState = true
          this.isRouterAlive = true
          this.indexShop = index
        }
      }
    },
    successImg(data) {
      this.dialogBindDataGood.prizePicUrl = data.imgurl
    },
    selectChange(val) {
      if (val.length > 1) {
        this.$refs.goodTable.clearSelection()
        this.$refs.goodTable.toggleRowSelection(val.pop())
      } else {
        if (val.length !== 0) {
          this.selectData = val
        }
      }
    },
    // 确认商品
    submmitFun() {
      if (this.selectData === undefined || this.selectData === null) {
        this.$message({
          type: 'warning',
          message: '请选择商品'
        })
        return false
      }
      for (const val of this.selectData) {
        const obj = {}
        obj.activityPrice = ''
        obj.activityCount = ''
        obj.itemId = val.itemId
        obj.itemName = val.itemTitle
        obj.itemType = val.itemType
        obj.okRate = val.okRate
        obj.prizePicUrl = val.defaultPicUrl
        obj.remark = val.remark
        obj.sellerId = val.sellerId
        obj.marketPrice = val.marketPrice
        if (this.indexShop === 0) {
          obj.sortNo = 0
        } else if (this.indexShop === 1) {
          obj.sortNo = 1
        } else if (this.indexShop === 2) {
          obj.sortNo = 2
        } else if (this.indexShop === 3) {
          obj.sortNo = 7
        } else if (this.indexShop === 5) {
          obj.sortNo = 3
        } else if (this.indexShop === 6) {
          obj.sortNo = 6
        } else if (this.indexShop === 7) {
          obj.sortNo = 5
        } else if (this.indexShop === 8) {
          obj.sortNo = 4
        }
        this.dataShop.push(obj)
      }
      for (let i = 0; i < this.shop9List.length; i++) {
        if (i === this.indexShop) {
          this.shop9List[i] = this.selectData[0].defaultPicUrl
        }
      }
      this.dataOption = null
      this.dialogState = false
    },
    submmitFunGood() {
      this.$refs.dialogBindDataGood.validate((valid) => {
        if (valid) {
          const obj = {}
          obj.okRate = this.dialogBindDataGood.okRate
          obj.itemName = this.dialogBindDataGood.itemName
          obj.prizePicUrl = this.dialogBindDataGood.prizePicUrl
          obj.activityPrice = this.dialogBindDataGood.activityPrice
          obj.activityCount = this.dialogBindDataGood.activityCount
          if (this.indexShop === 0) {
            obj.sortNo = 0
            this.shop9List[0] = this.dialogBindDataGood.prizePicUrl
          } else if (this.indexShop === 1) {
            obj.sortNo = 1
            this.shop9List[1] = this.dialogBindDataGood.prizePicUrl
          } else if (this.indexShop === 2) {
            obj.sortNo = 2
            this.shop9List[2] = this.dialogBindDataGood.prizePicUrl
          } else if (this.indexShop === 3) {
            obj.sortNo = 7
            this.shop9List[3] = this.dialogBindDataGood.prizePicUrl
          } else if (this.indexShop === 5) {
            obj.sortNo = 3
            this.shop9List[5] = this.dialogBindDataGood.prizePicUrl
          } else if (this.indexShop === 6) {
            obj.sortNo = 6
            this.shop9List[6] = this.dialogBindDataGood.prizePicUrl
          } else if (this.indexShop === 7) {
            obj.sortNo = 5
            this.shop9List[7] = this.dialogBindDataGood.prizePicUrl
          } else if (this.indexShop === 8) {
            obj.sortNo = 4
            this.shop9List[8] = this.dialogBindDataGood.prizePicUrl
          }
          this.dataShop.push(obj)
          this.handleClose()
        }
      })
    },
    // 活动图标
    geticonList() {
      activity.getIconList().then(res => {
        for (const val of res.data) {
          val.iconStyle = false
        }
        this.iconList = res.data
      })
    },
    clickIconFun(data) {
      for (const val of this.iconList) {
        val.iconStyle = false
        if (val.id === data.id) {
          val.iconStyle = true
          this.dialogBindData.activityIcon = data.img
        }
      }
    },
    handleChange(file) {
      this.file = file.raw
    },
    initUploadFileurl() {
      this.actionUrl = process.env.BASE_API + 'file/uploadImageAndCrtThumbImagesRichEdit'
    },
    uploadFile(content) {
      const fd = new FormData()
      fd.append('images', content.file)
      fd.append('resPath', this.resPath)

      const fileSize = fd.size / 1024 / 1024
      if (fileSize > 2) {
        this.$message({
          message: '上传图片不能大于2M',
          type: 'warning'
        })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        axios.post(content.action, fd).then(res => {
          loading.close()
          if (res.data.code === 1) {
            this.$message({
              message: '上传成功',
              type: 'success'
            })
            for (const val of this.iconList) {
              val.iconStyle = false
            }
            this.dialogBindData.activityIcon = res.data.data[0].maxImageUrl
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
          }
        }).catch(res => {
          this.$message({
            type: 'info',
            message: res.message
          })
          loading.close()
        })
      }
    },
    // 核销
    afteropen() {
      this.$prompt('请输入兑奖码进行核销', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        activity.after(value).then(res => {
          if (res.data.code === 1) {
            this.$message({
              message: '核销成功',
              type: 'success'
            })
            this.getPrizeRecordList()
          } else {
            this.$message({
              message: '核销码不存在',
              type: 'warning'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    // 反显
    reBindData(data) {
      const shopArr = []
      if (data.type === 1) {
        this.switchType = true
      } else {
        this.switchType = false
      }

      for (const key in this.dialogBindData) {
        this.dialogBindData[key] = data[key]
      }
      for (const val of data.list) {
        if (val.sortNo === 0) {
          this.shop9List[0] = val.prizePicUrl
        } else if (val.sortNo === 1) {
          this.shop9List[1] = val.prizePicUrl
        } else if (val.sortNo === 2) {
          this.shop9List[2] = val.prizePicUrl
        } else if (val.sortNo === 3) {
          this.shop9List[5] = val.prizePicUrl
        } else if (val.sortNo === 4) {
          this.shop9List[8] = val.prizePicUrl
        } else if (val.sortNo === 5) {
          this.shop9List[7] = val.prizePicUrl
        } else if (val.sortNo === 6) {
          this.shop9List[6] = val.prizePicUrl
        } else if (val.sortNo === 7) {
          this.shop9List[3] = val.prizePicUrl
        }
        const obj = {}
        obj.id = val.id
        obj.okRate = val.okRate
        obj.activityPrice = val.activityPrice
        obj.activityCount = val.activityCount
        obj.itemId = val.itemId
        obj.itemName = val.itemName
        obj.itemType = val.itemType
        obj.prizePicUrl = val.prizePicUrl
        obj.remark = val.remark
        obj.sellerId = val.sellerId
        obj.marketPrice = val.marketPrice
        obj.sortNo = val.sortNo
        obj.checkde = true
        shopArr.push(obj)
      }
      this.dataShop = shopArr
    },
    beginDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.dialogBindData.endTime) { // 如果结束时间不为空，则小于结束时间
            return new Date(self.dialogBindData.endTime).getTime() < time.getTime()
          } else {
            // return time.getTime() > Date.now() //开始时间不选时，结束时间最大值小于等于当天
            console.log('开始时间不选时，结束时间最大值小于等于当天')
          }
        }
      }
    },
    processDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.dialogBindData.startTime) { //如果开始时间不为空,则结束时间大于等于开始时间
           // return new Date(self.dialogBindData.startTime).getTime() >= time.getTime()// 如果开始时间不为空，则结束时间大于开始时间
            return time.getTime() < new Date(self.dialogBindData.startTime).getTime() - 86400000
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
            console.log('开始时间不选时，结束时间最大值小于等于当天')
          }
        }
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      if (this.dialogType === 3) {
        this.getPrizeRecordList()
      } else {
        this.getList()
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNo = val
      if (this.dialogType === 3) {
        this.getPrizeRecordList()
      } else {
        this.getList()
      }
    },
    handleClose() {
      for (const key in this.dialogBindDataGood) {
        this.dialogBindDataGood[key] = ''
      }
      this.dialogState = false
      this.isRouterAlive = false
      this.dataOption = null
      this.$refs.dialogBindDataGood.clearValidate()
    },
    cellcb(row) {
      if (row.row.checkde === true) {
        return 'myCell'
      }
    },
    goBack() {
      this.$router.go(-1)
    },
    statusVal(type) {
      if (type === 0) {
        return '点击核销'
      } else {
        return '已核销'
      }
    }
  }
}
</script>
<style type="text/scss" lang="scss">
  .myCell .el-checkbox__input {
    display: none
  }
  .el-upload-list{
    display: none;
  }
  .el-input__count{
    height: 25px;
  }
</style>
<style type="text/scss" lang="scss" scoped>
  .listName{
    margin: 0;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .btns-wrapper{
    display: flex;
    justify-content: flex-end;
    padding: 20px;
  }
  .table-wrapper{
    padding: 30px;
    background-color: #fff;
  }
  /* 中奖商品 */
  .shopBox{
    width: 280px;
    height: 280px;
    overflow: auto;
    border-top: 1px solid #e1e1e1;
    border-left: 1px solid #e1e1e1;
  }
  .shoplist{
    float: left;
    width: 90px;
    height: 90px;
    padding: 10px;
    border-bottom: 1px solid #e1e1e1;
    border-right: 1px solid #e1e1e1;
    position: relative;
    cursor: pointer;
  }
  .shoplist:hover{
    border: 1px solid red;
  }
  .el-icon-delete{
    position: absolute;
    top: 1%;
    right: 1%;
    color: #333;
    font-size: 26px;
    cursor: pointer;
  }
  .iconList{
    overflow: auto;
    padding: 0;
    margin: 0;
    li{
      float: left;
      list-style: none;
      margin: 0 5px;
      cursor: pointer;
      height: 94px;
      width: 94px;
      padding: 5px;
      border: 1px solid #fff;
      img{
        width: 82px;
        height: 82px;
      }
    }
    li:hover{
      border: 1px solid red;
    }
    .activeLi{
      border: 1px solid red;
    }
  }
  .morenImg{
    color: #fff;
    display: inline-block;
    padding: 0 10px;
    border-radius: 40px;
    background-color: #3a8ee6;
    line-height: 25px;
    font-size: 12px;
  }
  .statusClass0{
    color: #FF0000;
  }
  .statusClass1{
    color: #00CC00;
  }

</style>
